document.addEventListener('DOMContentLoaded', function () {
    // 创建 <style> 标签
    const styleElement = document.createElement('style');

    // 定义 CSS 样式规则
    const css = `
        .alert {
        font-family: "黑体", system-ui;
        font-size: 1rem;
        text-align: center;
        width: 300px;
        height: 50px;
        background-color: #fff;
        opacity: 0;
        position: fixed;
        top: 30%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 9999;
        padding: 10px;
        border-radius: 20px;
        transition: opacity 0.3s ease-in-out;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

        display: none;
        justify-content: center;
        align-items: center;
    }
    
    .alert-info {
        color: lightblue;
    }

    .alert-success {
        color: lightgreen;
    }

    .alert-warning {
        color: lightsalmon;
    }

    .alert-error {
        color: lightcoral;
    }
      `;

    // 将 CSS 样式规则添加到 <style> 标签中
    styleElement.appendChild(document.createTextNode(css));

    // 将 <style> 标签添加到 <head> 标签中
    document.head.appendChild(styleElement);
});


function alert_info(message) {
    my_alert("📚 info " + message, 'info');
}

function alert_warn(message) {
    my_alert("❗ warning " + message, 'warning');

}

function alert_error(message) {
    my_alert("❌ error " + message, 'error');
}

function alert_success(message) {
    my_alert("✅ success " + message, 'success');
}

function my_alert(message, level) {
    // const alertBox = document.getElementById('alertBox');
    const alertBox = document.createElement('div');
    alertBox.classList.add('alert');
    alertBox.id = 'alertBox';
    document.body.appendChild(alertBox);

    alertBox.classList.add('show');
    let show_css = 'alert-' + level;
    // 设置不同级别的样式
    alertBox.classList.add(show_css);

    // 显示消息内容
    alertBox.innerText = message;

    let fadeInTimer; // 定义一个变量用于存储淡入定时器的 ID
    let fadeOutTimer; // 定义一个变量用于存储淡出定时器的 ID


    // 清除之前的淡出定时器
    clearTimeout(fadeInTimer);
    clearTimeout(fadeOutTimer);

    // 点击触发淡入效果
    alertBox.style.display = 'flex';
    fadeInTimer = setTimeout(() => {
        alertBox.style.opacity = '1';
    }, 100);


    // 设置新的淡出定时器，在2秒后淡出alert框
    fadeOutTimer = setTimeout(() => {
        alertBox.style.opacity = '0';
        setTimeout(() => {
            alertBox.remove();
        }, 1000);
    }, 1500);
}